<template>
    <div style="background: rgba(69, 69, 146, 0.06);">
        <div v-if="loading" class="loadingClass">
            <Loading class="loadFont" vertical>数据整理中...</Loading>
        </div>
        <div class="dayClass" v-else>
            <div class="dayNextClass">
                <div class="CalendarShow" @click="handleCalendarShow">
                    <div class="dateTime">{{cal_label}}</div>
                </div>
                <div class="CombinedClass">
                    <img :src="Combined" class="CombinedImage"/>
                    Yanhua2.Wang@sanofi.com
                </div>
            </div>
            <!--勾选统计-->
            <div v-if="productGroup=='INS'">
                <div class="contentClass" v-if="TickStatistics">
                    <div class="GouXuanNum">
                        <div>
                            <div class="title_text">已勾选重点客户人数</div>
                        </div>
                        <div class="title_right">
                            <span :style="selectCount<GouNumberDa? 'color:red':'color:green'"><span class="fontSize">{{selectCount}}</span>/{{GouNumberDa}}</span>
                        </div>
                    </div>
                    <div class="GouXuanNum">
                        <div>
                            <div class="title_text" style="width: 230px">已选AB“到”+AB“纳”重点客户</div>
                        </div>
                        <div class="title_right">
                            <span class="fontSize" style="color: #FFFFFF">{{selectABCount}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div v-if="productGroup=='OAD'">
                <div class="contentClass" v-if="TickStatistics">
                    <div class="GouXuanNum">
                        <div>
                            <div class="title_text">已勾选重点客户人数</div>
                        </div>
                        <div class="title_right">
                            <span :style="selectCount<GouNumberDa? 'color:red':'color:green'"><span class="fontSize">{{selectCount}}</span>/{{GouNumberDa}}</span>
                        </div>
                    </div>
                    <div class="GouXuanNum">
                        <div>
                            <div class="title_text" style="width: 230px">已选周边科室重点客户数</div>
                        </div>
                        <div class="title_right">
                            <span class="fontSize" style="color: #FFFFFF">{{selectZhouount}}</span>
                        </div>
                    </div>
                </div>
            </div>
            <!--搜索-->
            <div class="SeacherClass">
                <div class="search">
                    <img :src="Seched" @click=""/>
                    <input class="input" @input="inputSearch($event)" :value="searchText"
                           placeholder="搜索医生/ETMS编码"/>
                </div>
                <img v-if="selectScreenNum === 0 && !showScreen" :src="update" @click="clickScreen"
                     style="margin-right: 8px;"/>
                <img v-if="selectScreenNum > 0 || showScreen" :src="update2" @click="clickScreen"
                     style="margin-right: 8px;"/>
                <div v-if="selectScreenNum > 0 && !showScreen" style="position: absolute;top: 9px;right: -7px;">
                    <div class="standardNum"
                         style="font-size: 8px;width: 12px;height: 12px;border: 1px solid #454592;border-radius: 10px;">
                        {{selectScreenNum}}
                    </div>
                </div>
            </div>
            <!--筛选-->
            <div v-if="showScreen" class="screenClass">
                <div class="title_top">
                    <div class="titleicon"></div>
                    <div class="title_right">潜力</div>
                </div>
                <div class="screenList">
                    <div v-for="(item, index) in potentialList" v-bind:key="index"
                         @click="selectPotential(index)"
                         :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                         class="screen_item">
                        {{item.name}}
                    </div>
                </div>
                <div class="title_top">
                    <div class="titleicon"></div>
                    <div class="title_right">派别</div>
                </div>
                <div class="screenList">
                    <div v-for="(item, index) in statusList" v-bind:key="index" @click="selectFaction(index)"
                         :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                         class="screen_item">
                        {{item.name}}
                    </div>
                </div>
                <!--//前到纳做-->
                <div class="title_top">
                    <div class="titleicon"></div>
                    <div class="title_right">状态</div>
                </div>
                <div class="screenList">
                    <div v-for="(item, index) in ComeorwardList" v-bind:key="index" @click="selectComeorward(index)"
                         :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                         class="screen_item">
                        {{item.name}}
                    </div>
                </div>
                <!--//-->
                <div class="title_top">
                    <div class="titleicon"></div>
                    <div class="title_right">医院</div>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                    <div class="screenList" :style="showAllHospital?'':'height: 32px;overflow: hidden;'">
                        <div v-for="(item, index) in hospitalList" v-bind:key="index"
                             @click="selectHospital(index)"
                             :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                             class="screen_item">
                            {{item.name}}
                        </div>
                    </div>
                    <div v-if="!showAllHospital" class="standardNum" style="height: 24px;margin: 0 5px;">
                        <img :src="item_down" style="transform: rotate(90deg);"
                             @click="clickAllHospital"/>
                    </div>
                </div>
                <div class="title_top">
                    <div class="titleicon"></div>
                    <div class="title_right">科室</div>
                </div>
                <div style="display: flex;flex-direction: row;justify-content: space-between;">
                    <div class="screenList" :style="showAllDepartment?'':'height: 32px;overflow: hidden;'">
                        <div v-for="(item, index) in specialtyList" v-bind:key="index"
                             @click="selectDepartment(index)"
                             :style="item.select?'color:#454592;border-color:#454592;background: rgba(69, 69, 146, 0.1);':''"
                             class="screen_item">
                            {{item.name}}
                        </div>
                    </div>
                    <div v-if="!showAllDepartment" class="standardNum" style="height: 24px;margin: 0 5px;">
                        <img :src="item_down" style="transform: rotate(90deg);"
                             @click="clickAllDepartment"/>
                    </div>
                </div>
            </div>
            <div v-if="showScreen" style="position: fixed;z-index: 9999;bottom: 0;width: 100%;">
                <div style="display: flex;flex-direction: row;justify-content: space-between;padding: 20px;">
                    <div class="button" @click="clearScreenSee"
                         :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">取消
                    </div>
                    <div class="button" @click="screenResultSee"
                         :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;'">查看
                    </div>
                </div>
            </div>
            <!--勾选列表-->
            <div v-if="!showScreen" class="formClass">
                <div class="columnClass">
                    <div class="item_name">
                        <div class="formColumnName">姓名</div>
                    </div>
                    <div class="formColumnDetail">
                        <div class="items">医院/科室/潜力/派别/状态</div>
                    </div>
                    <div v-if="CheckboxShow" class="formColumnScreen">
                        <div class="items">筛选</div>
                    </div>
                </div>
                <div class="parent-dom" style="height: 47vh;">
                    <vue-scroll :ops="ops">
                        <div class="child-dom">
                            <div class="list_item" v-for="(item, index) in infoList" v-bind:key="index">
                                <div class="item_top" :style="item.select?'border-radius: 5px 5px 0 0;':''">
                                    <div style="display: flex;flex: 5;flex-direction: row;align-items: center;">
                                        <div class="item_name">
                                            <div class="formColumnName">{{item.Name}}</div>
                                        </div>
                                        <div class="formColumnDetail">
                                            <div class="items">
                                                {{item.hospital}}/{{item.Department}}/{{item.potential}}/{{item.faction}}/{{item.state}}
                                            </div>
                                        </div>
                                        <div v-if="CheckboxShow" class="formColumnScreen">
                                            <van-checkbox v-model="item.Select" shape="square"
                                                          checked-color="#444692"></van-checkbox>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </vue-scroll>
                </div>


            </div>
            <!--Button按钮-->
            <div v-if="!showScreen" class="buttonClass">
                <div class="buttonNext">
                    <div v-if="Submit">
                        <div class="button" @click="clearScreen"
                             :style="'width:' + (clientWidth - 60) / 2 + 'px;background: #ACB318;'">清除
                        </div>
                    </div>
                    <div v-if="Submit">
                        <div class="button" @click="screenResult"
                             :style="selectCount>=GouNumberDa?'width:' + (clientWidth - 60) / 2 + 'px;background: #454592;':'width:' + (clientWidth - 60) / 2 + 'px;background: #A9A9A9;'">
                            提交
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <van-popup v-model="stepShow" :close-on-click-overlay="false" style="border-radius: 5px;">
            <div class="step_wrapper">
                <div class="step_title">
                    <span class="step_title_span">
                        本季度勾选与计划步骤提示
                    </span>
                    <span>(0/4)</span>
                </div>
                <div class="step_content_wrapper">
                    <div class="step_content">
                        步骤&nbsp;1&nbsp;勾选重点客户
                    </div>
                    <div class="step_content">
                        步骤&nbsp2&nbsp;10月重点计划
                    </div>
                    <div class="step_content">
                        步骤&nbsp;3&nbsp;11月重点计划
                    </div>
                    <div class="step_content">
                        步骤&nbsp;4&nbsp;12月重点计划
                    </div>
                </div>
                <div class="step_confirm_wrapper">
                    <div class="step_confirm_btn" @click="stepShow=false">
                        开始
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="stepSuccessShow" :close-on-click-overlay="false" style="border-radius: 5px;">
            <div class="step_wrapper1">
                <div class="step_title1">
                    <span class="step_title_span1">
                        提交成功(1/4)
                    </span>
                </div>
                <div class="step_content_wrapper1">
                    <div class="step_content1">
                        即将进入10月重点计划页
                    </div>
                </div>
                <div class="step_confirm_wrapper1">
                    <div class="step_end_btn1" @click="SaveAndClose">
                        保存并关闭
                    </div>
                    <div class="step_confirm_btn1" @click="GoToTheNextStep">
                        进入下一步
                    </div>
                </div>
            </div>
        </van-popup>
        <van-popup v-model="stepfailureShow" :close-on-click-overlay="false" style="border-radius: 5px;">
            <div class="step_wrapper2">
                <div class="step_title2">
                    <span class="step_title_span2">
                       未成功提交
                    </span>
                </div>
                <div class="step_content_wrapper2">
                    <div class="step_content2">
                       重点客户数需>={{GouNumberDa}}, 请继续选择。
                    </div>
                </div>
                <div class="step_confirm_wrapper2">
                    <div class="step_confirm_btn2" @click="stepfailureShow=false">
                        关闭
                    </div>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
    import Vue from "vue";
    import {Loading} from "vant";
    import left_icon from "@assets/icon/chevron_left.svg";
    import right_icon from "@assets/icon/chevron_right.svg";
    import dayjs from "dayjs";
    import F2 from "@antv/f2";
    import down_cc from "@assets/icon/34.svg";
    import unrelease from "@assets/image/coming_soon.png";
    import {Tab, Tabs, Circle, Overlay, Dialog, Checkbox, CheckboxGroup, Popup} from "vant";
    import vuescroll from 'vuescroll';

    Vue.use(vuescroll);
    Vue.use(Popup);
    import
    {
        getToken,
        getDictionary,
        getFilterData
    } from '@api/tm'

    Vue.use(Tab);
    Vue.use(Tabs);
    Vue.use(Circle);
    Vue.use(Dialog);
    Vue.use(Checkbox);
    Vue.use(CheckboxGroup);
    import up from "@assets/icon/up.svg";
    import Calendar from "@components/snfDashboardCalendar";
    import Combined from "@assets/icon/Combined Shape.svg";
    import Seched from '@assets/icon/20.svg';
    import update from '@assets/icon/21.svg';
    import update2 from '@assets/icon/22.svg'
    import crown from '@assets/icon/crown.svg'
    import item_down from '@assets/icon/item_down.svg'

    export default {
        name: "PL",
        components: {
            Tab,
            Tabs,
            Calendar,
            Loading,
            Overlay,
            Dialog,
            Checkbox,
            CheckboxGroup,
            vuescroll
        },
        data() {
            return {
                productGroup:"",
                stepSuccessShow:false,
                stepfailureShow:false,
                stepShow: false,
                ops: {
                    vuescroll: {},
                    scrollPanel: {},
                    rail: {},
                    bar: {
                        background: '#454592',
                        opacity: "0.1"
                    }
                },
                TickStatistics: true,
                item_down: item_down,
                showAllHospital: false,
                showAllDepartment: false,
                crown: crown,
                cal_label: "",
                weekday: "",
                Combined: Combined,
                unrelease: unrelease,
                fullCalendarShow: false,
                loading: true,
                left_icon: left_icon,
                right_icon: right_icon,
                dayList: [],
                down_cc: down_cc,
                up: up,
                day: "",
                GouNumberShi: 0,
                GouNumberDa: 0,
                Seched: Seched,
                searchText: "",
                update: update,
                update2: update2,
                selectScreenNum: 0,
                showScreen: false,
                clientWidth: document.documentElement.clientWidth, // 页面宽度
                infoList: [
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "纳",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "内分泌科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "内分泌科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "到",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "到",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    },
                    {
                        Name: "张医生",
                        hospital: "河北医科大学",
                        Department: "呼吸科",
                        potential: "A",
                        faction: "预昆派",
                        state: "前",
                        Select: false
                    }
                ],
                CheckboxShow: true,
                preview: false,//确定
                Submit: true,//提交
                potentialList: [],
                statusList: [],
                ComeorwardList: [],
                hospitalList: [],
                specialtyList: [],
            };
        },
        methods: {
            //进入下一步
            GoToTheNextStep(){
                this.stepSuccessShow=false;
                this.$router.push('/dashboard/plStresspWrite')
            },
            //保存并关闭
            SaveAndClose(){
                this.stepSuccessShow=false
            },
            //查看清除
            clearScreenSee() {
                this.showScreen = false
                for (let i = 0; i < this.ComeorwardList.length; i++) {
                    this.ComeorwardList[i].select = false
                }
                for (let i = 0; i < this.potentialList.length; i++) {
                    this.potentialList[i].select = false
                }
                for (let i = 0; i < this.statusList.length; i++) {
                    this.statusList[i].select = false
                }
                for (let i = 0; i < this.hospitalList.length; i++) {
                    this.hospitalList[i].select = false
                }
                for (let i = 0; i < this.specialtyList.length; i++) {
                    this.specialtyList[i].select = false
                }
                this.showAllHospital = false
                this.showAllDepartment = false
                this.selectScreenNum = 0
                this.TickStatistics = true;
            },
            //查看
            screenResultSee() {
                this.selectScreenNum = null;
                for (let i = 0; i < this.ComeorwardList.length; i++) {
                    if (this.ComeorwardList[i].select === true) {
                        this.selectScreenNum = this.selectScreenNum + 1
                    }
                }
                for (let i = 0; i < this.potentialList.length; i++) {
                    if (this.potentialList[i].select === true) {
                        this.selectScreenNum = this.selectScreenNum + 1
                    }
                }
                for (let i = 0; i < this.statusList.length; i++) {
                    if (this.statusList[i].select === true) {
                        this.selectScreenNum = this.selectScreenNum + 1
                    }
                }
                for (let i = 0; i < this.hospitalList.length; i++) {
                    if (this.hospitalList[i].select === true) {
                        this.selectScreenNum = this.selectScreenNum + 1
                    }
                }
                for (let i = 0; i < this.specialtyList.length; i++) {
                    if (this.specialtyList[i].select === true) {
                        this.selectScreenNum = this.selectScreenNum + 1
                    }
                }
                this.showScreen = false
                this.TickStatistics = true;
            },
            // 选择潜力
            selectPotential(index) {
                this.potentialList[index].select = !this.potentialList[index].select
                for (let i = 0; i < this.potentialList.length; i++) {
                    if (i !== index) {
                        this.potentialList[i].select = false
                    }
                }
            },
            // 选择派别
            selectFaction(index) {
                this.statusList[index].select = !this.statusList[index].select
                for (let i = 0; i < this.statusList.length; i++) {
                    if (i !== index) {
                        this.statusList[i].select = false
                    }
                }
            },
            // 选择前到纳做
            selectComeorward(index) {
                this.ComeorwardList[index].select = !this.ComeorwardList[index].select
                for (let i = 0; i < this.ComeorwardList.length; i++) {
                    if (i !== index) {
                        this.ComeorwardList[i].select = false
                    }
                }
            },
            // 选择医院
            selectHospital(index) {
                this.hospitalList[index].select = !this.hospitalList[index].select
                for (let i = 0; i < this.hospitalList.length; i++) {
                    if (i !== index) {
                        this.hospitalList[i].select = false
                    }
                }
            },
            // 选择科室
            selectDepartment(index) {
                this.specialtyList[index].select = !this.specialtyList[index].select
                for (let i = 0; i < this.specialtyList.length; i++) {
                    if (i !== index) {
                        this.specialtyList[i].select = false
                    }
                }
            },
            // 显示全部医院
            clickAllHospital() {
                this.showAllHospital = true
            },
            // 显示全部科室
            clickAllDepartment() {
                this.showAllDepartment = true
            },
            //清除选中
            clearScreen() {
                for (let i = 0; i < this.infoList.length; i++) {
                    if (this.infoList[i].Select == true) {
                        this.infoList[i].Select = false;
                    }
                }
                this.GouNumberShi = 0;
                this.CheckboxShow = true;
                this.Submit = true;
                this.preview = false;
            },
            //提交
            screenResult() {
                let number = 0;
                for (let i = 0; i < this.infoList.length; i++) {
                    if (this.infoList[i].Select == true) {
                        number++;
                    }
                }
                if (number < this.GouNumberDa) {
                    this.stepfailureShow=true;
                } else {
                    this.stepSuccessShow=true;
                }
            },
            // 点击筛选
            clickScreen() {
                scrollTo(0, 0)
                this.showScreen = true;
                this.TickStatistics = false;
            },
            // 输入搜索条件
            inputSearch(e) {
                this.searchText = e.currentTarget.value
            },
            changeWeek(type) {
                switch (type) {
                    case "preWeek": {
                        this.weekday = dayjs(this.weekday)
                            .subtract(7, "day")
                            .format("YYYY-M-D");
                        this.getWeekDay();
                        break;
                    }
                    case "nextWeek": {
                        this.weekday = dayjs(this.weekday).add(7, "day").format("YYYY-M-D");
                        this.getWeekDay();
                        break;
                    }
                }
            },
            handleCalendarShow() {
                this.fullCalendarShow = !this.fullCalendarShow;
            },
            getWeekDay() {
                this.dayList = [];
                let weekStart = dayjs(this.weekday).startOf("week").format("YYYY-M-D");

                for (let i = 0; i < 7; i++) {
                    this.dayList.push({
                        idx: dayjs(weekStart).add(i, "day").format("D"),
                        day: dayjs(weekStart).add(i, "day").format("YYYY-M-D"),
                    });
                }
            },
            handleDayClick(day) {
                this.day = day;
                //TODO 调用接口获取数据
            },
        },
        mounted() {
            //获取token
            getToken({email: 'Yanhua2.Wang@sanofi.com'}).then(res => {
                setTimeout(() => {
                    this.loading = false;
                    this.day = dayjs().subtract(1, "day").format("YYYY-M-D");
                    this.weekday = this.day;
                    this.getWeekDay();
                    this.stepShow = true
                }, 1000);
                //获取日期
                this.day = dayjs().format('YYYY/MM')
                //获取登陆人的组
                let Group = res.token.pt
                if (Group == "PT76") {
                    this.productGroup = "INS";
                    // this.GouNumberDa=20;
                    this.GouNumberDa=4;
                } else {
                    this.productGroup = "OAD"
                    this.GouNumberDa=30;
                }
                console.log(res.tokenString);
                let param = {
                    tokenString: res.tokenString,
                    monthId: 202007,
                    employeeCode: "POS_70020905",
                    filterType: "product"
                }
                let param1 = {
                    tokenString: res.tokenString,
                    monthId: 202007,
                    employeeCode: "POS_70020905",
                    filterType: "all",
                    product: "LANTUS"
                }
                //获取筛选
                getFilterData(param1).then(res => {
                    console.log(res);
                    //状态
                    res.data.segStatus.forEach(item => {
                        this.ComeorwardList.push({
                            name: item.name,
                            code: item.code,
                            select: false
                        });
                    })
                    //医院
                    res.data.hostptial.forEach(item => {
                        this.hospitalList.push({
                            name: item.name,
                            code: item.code,
                            select: false
                        });
                    })
                    //科室
                    res.data.specialty.forEach(item => {
                        this.specialtyList.push({
                            name: item.name,
                            code: item.code,
                            select: false
                        });
                    })
                    //潜力
                    res.data.potential.forEach(item => {
                        this.potentialList.push({
                            name: item.name,
                            code: item.code,
                            select: false
                        });
                    })
                    //派别
                    res.data.status.forEach(item => {
                        this.statusList.push({
                            name: item.name,
                            code: item.code,
                            select: false
                        });
                    })
                })
            })
        },
        watch: {
            day(newval, oldval) {
                this.fullCalendarShow = false;
                this.weekday = newval;
                this.getWeekDay();
                let m = dayjs(newval).month()
                let y = dayjs(newval).year()

                let q = ''
                if (m < 3) {
                    q = "Q1"
                } else if (m < 6) {
                    q = "Q2"
                } else if (m < 9) {
                    q = "Q3"
                } else {
                    q = "Q4"
                }
                this.cal_label = y + '/' + q;
            },
        },
        computed: {
            selectCount() {
                let c_count = this.infoList.filter(item => item.Select).length
                this.GouNumberShi = c_count;
                return c_count
            },
            selectABCount() {
                let count=this.infoList.filter(item => {
                    if (item.Select && (item.potential == 'A' || item.potential == 'B') && (item.state == "到" || item.state == "纳")) {
                        return true
                    } else {
                        return false
                    }
                }).length
                return count
            },
            selectZhouount(){
                let count=this.infoList.filter(item => {
                    if (item.Select && (item.Department != '内分泌科')) {
                        return true
                    } else {
                        return false
                    }
                }).length
                return count
            }
        }
    };
</script>
<style src="./plStress.css" scoped></style>